<template>
 <div>
     <div>
         <span>省市区</span>
        <el-table
            :data="tableData"
            border
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :span-method="arraySpanMethod"
            style="width: 100%">
            <el-table-column
                prop="province"
                label="省"
                width="150">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市"
                width="150">
            </el-table-column>
            <el-table-column
                prop="zone"
                label="区"
                width="150">
            </el-table-column>
            <el-table-column
                prop="remake"
                label="备注">
                <template slot-scope="scope">
                <template v-if="scope.row.edit">
                <el-input class="edit-input" size="small" v-model="scope.row.remake"></el-input>
                </template>
                <span v-else>{{ scope.row.remake }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="publicSubsidy"
                sortable
                label="国补"
                width="150">
                <template slot-scope="scope">
                <template v-if="scope.row.edit">
                <el-input class="edit-input" size="small" v-model="scope.row.publicSubsidy"></el-input>
                </template>
                <span v-else>{{ scope.row.publicSubsidy }}</span>
                </template>
            </el-table-column>
        </el-table>
     </div>
  <!-- <div>
      <span></span>
        <el-table :data="list" :span-method="objectSpanMethod" border>
        <el-table-column prop="Id" label="名称" width="180"></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" sortable label="数值"></el-table-column>
        <el-table-column prop="good" label="商品"></el-table-column>
        </el-table>
  </div> -->
 </div>
</template>
<script>
//  import axios from 'axios'
 export default {
  name: "city",
  data() {
   return {
        rowspan: "",
    tableData: [], //table的数据
    originalData: [],//table数据备份
    provinceArr: [], //省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除
    provincePos: 0, //省份要合并数组内容的序号
    cityArr: [], //同上 市
    cityPos: [],
    zoneArr: [],//同上 区
    zonePos: [],
    loading: false
   }
  },
  created() {
   this.init()
//    this.convertTableData();
  },
  methods: {
   init() {
    // this.loading = true;
    // axios.get('./static/table.json')
    //  .then(res => {
    //   this.loading = false;
    let res = [
                {
                    "province": "浙江省",
                    "city": "杭州市",
                    "zone": "余杭区",
                    "type": "ICBC",
                    "remake": "2017-2018年期间建成并网的分布式光伏",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.1",
                    "citySubsidy": "0.1"
                },
                {
                    "province": "浙江省",
                    "city": "杭州市",
                    "zone": "余杭区",
                    "type": "DWE",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.1",
                    "citySubsidy": "0."
                },
                {
                    "province": "浙江省",
                    "city": "杭州市",
                    "zone": "萧山区",
                    "type": "DWE",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.1",
                    "citySubsidy": "0."
                },
                {
                    "province": "浙江省",
                    "city": "杭州市",
                    "zone": "西湖区",
                    "type": "ALL",
                    "remake": "2017-2018年期间建成并网的分布式光伏",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.1",
                    "citySubsidy": "0.2"
                },
                {
                    "province": "浙江省",
                    "city": "嘉兴市",
                    "zone": "海盐县",
                    "type": "ALL",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.2",
                    "citySubsidy": "0.1"
                },
                {
                    "province": "安徽省",
                    "city": "阜阳市",
                    "zone": "太和县",
                    "type": "ALL",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.2",
                    "citySubsidy": "0.1"
                },
                {
                    "province": "安徽省",
                    "city": "合肥市",
                    "zone": "蜀山区",
                    "type": "ALL",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.2",
                    "citySubsidy": "0.1"
                },
                {
                    "province": "安徽省",
                    "city": "合肥市",
                    "zone": "庐阳区",
                    "type": "ALL",
                    "remake": "对居民住宅单独建设的光伏发电项目",
                    "publicSubsidy": "0.37",
                    "provinceSubsidy": "0.2",
                    "citySubsidy": "0.1"      
                },
                
            ]
      this.tableData = res.map((v, index) => {
        this.$set(v, 'edit', false) //增加一个新的属性
        //可以修改的属性值,进行添加一个对应的原本值
        v.originalRemake = v.remake;
        v.originalPublicS = v.publicSubsidy;
        v.originalProvinceS = v.provinceSubsidy;
        v.originalCityS = v.citySubsidy;
        return v
        })
        this.originalData = this.tableData;
        this.merage() //合并的方法
        //  })
        //  .catch(e => {
        //   console.log(e)
        //  })
   },
   confirmEdit(row) {
    row.edit = false

    //把新的值,覆盖原本值,以防再次修改
    row.originalRemake = row.remake
    row.originalPublicS = row.publicSubsidy
    row.originalProvinceS = row.provinceSubsidy
    row.originalCityS = row.citySubsidy
    this.$message({
     message: 'The title has been edited',
     type: 'success'
    })
   },
   arraySpanMethod({row, column, rowIndex, columnIndex}) {
    if (columnIndex === 0) {
     //第一列的合并方法,省
     const _row_1 = this.provinceArr[rowIndex];
     const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
     return {
      rowspan: _row_1,
      colspan: _col_1
     }
    } else if (columnIndex === 1) {
     //第二列的合并方法,市
     const _row_2 = this.cityArr[rowIndex];
     const _col_2 = _row_2 > 0 ? 1 : 0;
     return {
      rowspan: _row_2,
      colspan: _col_2
     }
    } else if (columnIndex === 2) {
     //第三列的合并方法,区
     const _row_3 = this.zoneArr[rowIndex];
     const _col_3 = _row_3 > 0 ? 1 : 0;
     return {
      rowspan: _row_3,
      colspan: _col_3
     }
    }
   },
   merage() {
    //要合并的数组的方法
    this.merageInit();
    for (var i = 0; i < this.tableData.length; i++) {
     if (i === 0) {
      //第一行必须存在
      this.provinceArr.push(1);
      this.provincePos = 0;

      this.cityArr.push(1);
      this.cityPos = 0;
      this.zoneArr.push(1);
      this.zonePos = 0;
     }
     else {
      // 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号

      //省
      if (this.tableData[i].province === this.tableData[i - 1].province) {
       this.provinceArr[this.provincePos] += 1;
       this.provinceArr.push(0);
      } else {
       this.provinceArr.push(1);
       this.provincePos = i;
      }

      //市
      if (this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
       this.cityArr[this.cityPos] += 1;
       this.cityArr.push(0);
      } else {
       this.cityArr.push(1);
       this.cityPos = i;
      }

      //区
      if (this.tableData[i].zone === this.tableData[i - 1].zone && this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
       this.zoneArr[this.zonePos] += 1;
       this.zoneArr.push(0);
      } else {
       this.zoneArr.push(1);
       this.zonePos = i;
      }
     }
    }
   },
   merageInit() {
    //初始化省市区的合并行的数组
    this.provinceArr = [];
    this.provincePos = 0;
    this.cityArr = [];
    this.cityPos = 0;
    this.zoneArr = [];
    this.zonePos = 0;
   },
   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1].includes(columnIndex)) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0;  // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    convertTableData() {
        let data = this.list;
        let arr = [];
        let rowspan = [];
        data.forEach(item => {
            //debugger
            for (let i = 0; i < item.data.length; i++) {
                let rdata = {
                    ...item,
                    ...item.data[i],
                    // ...item.data[i].goods[j]
                };
                console.log(rdata);
                rdata.combineNum = Number(item.data[i].goods.length) + Number(item.data.length);
                delete rdata.goods;
                delete rdata.data;
                // rdata={ id: 1,name: "name-1",amount: 1003}
                arr.push(rdata);
                // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
                if (i == 0) {
                    rowspan.push(4);
                } else {
                    rowspan.push(0);
                }
                for(let j=0;j<item.data[i].goods.length;j++){
                    let rdata = {
                        ...item,
                        ...item.data[i],
                        ...item.data[i].goods[j]
                    };
                    console.log(rdata);
                    rdata.combineNum = Number(item.data[i].goods.length) + Number(item.data.length);
                    delete rdata.goods;
                    delete rdata.data;
                    // rdata={ id: 1,name: "name-1",amount: 1003}
                    arr.push(rdata);
                    // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
                    if (i == 0) {
                        rowspan.push(4);
                    } else {
                        rowspan.push(0);
                    }
                }
            }
        });
      //console.log(arr)
      this.list = arr;
      console.log(this.list);
      console.log(rowspan);
      this.rowspan = rowspan;
    }
  }
 }
</script>
<style scoped>
</style>